<template>
  <div>
    <centerHeader :title="header"></centerHeader>
    <div class="znts">
      <div class="card" v-for="(item, index) in content" :key="index">
        <div class="card-nav">
            <span>{{item.title}}</span>
            <el-switch :active-value="1" :inactive-value="0" v-model="item.type" active-color="#36a4ff" inactive-color="#bfbfbf" class="span" @change="idOpen(item.status, item.type)"></el-switch>
        </div>
        <div class="card-center">
          <div class="content">
            <p>{{item.text}}</p>
            <p><img src="../../../public/img/edit0.png" alt=""><span>图文简介1</span></p>
            <p><span>图文简介2</span><span></span></p>
            <p><span>图文简介3</span><span></span></p>
          </div>
          <div class="footer"><div @click="redact(index)"><img src="../../../public/img/paste.png" alt=""><span>编辑</span></div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  data() {
    return {
      header: [{ title: "智能推送", path: "" }],
      content: [
        {
          status: 0,
          title: "关注图文推送",
          text:
            "开启后系统将向用户推送相应的客服消息。推送时间：用户关注公众号10分钟后推送。",
          type: 1
        },
        {
          status: 1,
          title: "签到图文推送",
          text:
            "开启后系统将向签到用户推送相应的客服消息。推送时间: 用户签到1小时后推送。",
          type: 1
        }
      ]
    };
  },
  methods: {
    redact(idx) {
      this.$router.push({path:"/home/Extension/pushRedact", query:{type: idx}});
    },
    idOpen(status, type) {
      console.log(status, type)
      let that = this;
      that.axios
        .post("/cp/v1/push/getstatus", {
          status: status,
          type: type,
          d_id: JSON.parse(localStorage.userInfo).user_id
        })
        .then(res => {
          console.log(res);
        })
        .catch(function(error) {
          error = error + "";
          if (error.search("timeout") !== -1) {
            //超时判断
            that.loading_read = true;
          }
        });
    }
  },
  components: {
    centerHeader
  },
  created () {
    let that = this;
      that.axios
        .post("/cp/v1/push/getindex", {
          d_id: JSON.parse(localStorage.userInfo).user_id
        })
        .then(res => {
          if( res.data.code === 200 ) {
            console.log(res.data.data)
            that.content[0].type = res.data.data.sub_type;
            that.content[1].type = res.data.data.sign_type;
          }
        })
        .catch(function(error) {
          error = error + "";
          if (error.search("timeout") !== -1) {
            //超时判断
            that.loading_read = true;
          }
        });
  }
};
</script>
<style scoped>
/* 智能推送 */
.znts {
  width: 100%;
  display: flex;
  padding: 22px 0 0 32px;
  font-size: 14px;
}
.card {
  width: 27%;
  background: #f5f5f5;
  box-shadow: 0px 0px 8px rgba(51, 51, 51, 0.23);
  margin-right: 100px;
  min-width: 283px;
}
.card .card-nav {
  width: 100%;
  background: #fff;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26px;
  box-sizing: border-box;
  color: #666;
}
.card .card-center {
  width: 100%;
  padding: 18px 26px;
  box-sizing: border-box;
  color: #666;
}
.card .card-center .content {
  width: 100%;
  background: #fff;
  padding: 13px 10px 0;
  box-sizing: border-box;
  font-size: 16px;
  margin-bottom: 5px;
}
.card .card-center .content p:first-child {
  width: 100%;
  background: #fff;
  line-height: 2em;
  box-sizing: border-box;
  margin-bottom: 11px;
  text-align: justify;
}
.card .card-center .content p:nth-child(2) {
  width: 100%;
  position: relative;
  margin-bottom: 6px;
}
.card .card-center .content p:nth-child(2) img {
  width: 100%;
}
.card .card-center .content p:nth-child(2) span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: rgba(0, 0, 0, 0.5);
  padding-left: 28px;
  box-sizing: border-box;
  color: #fff;
}
.card .card-center .content p:nth-child(3),
.card .card-center .content p:nth-child(4) {
  width: 100%;
  height: 50px;
  border-top: 1px solid #d2d2d2;
  padding-left: 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .card-center .content p:nth-child(3) span:last-child,
.card .card-center .content p:nth-child(4) span:last-child {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../../../public/img/edit0.png) center no-repeat;
  background-size: cover;
}
.card .card-center .footer {
  width: 100%;
  padding: 5px 0;
  background: #fff;
}
.card .card-center .footer div {
  width: 80px;
  height: 35px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.card .card-center .footer div:hover {
  background: #ddd;
  cursor: pointer;
}
.card .card-center .footer div img {
  width: 19px;
  height: 24px;
  margin-right: 6px;
}
</style>
